<template>

    <!---搜索表单-->
    <div class="search-div">
        <el-form label-width="70px" size="small">
            <el-row>
                <el-col :span="12">
                <el-form-item label="食物种类">
                    <el-select
                    class="m-2"
                    placeholder="请选择"
                    size="small"
                    style="width: 100px"
                    v-model="queryDto.speciesId"
                    >
                    <el-option
                        v-for="item in brandList"
                        :key="item.id"
                        :label="item.sname"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
                </el-col>
            </el-row>
            <el-row style="display:flex">
                <el-button type="primary" size="small" @click="findManages">
                    搜索
                </el-button>
                <el-button size="small" @click="resetData">重置</el-button>
            </el-row>
        </el-form>
    </div>

    <!--添加按钮-->
    <div class="tools-div">
        <el-button type="success" size="small" @click="addManage">添 加</el-button>
    </div>
    <!---数据表格-->
    <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号"/>
        <el-table-column prop="dname" label="食物名称" />
        <el-table-column prop="sname" label="食物种类" />
        <el-table-column prop="carbohydrate" label="碳水化合物（g）" />
        <el-table-column prop="protein" label="蛋白质(g)" />
        <el-table-column prop="fat" label="脂肪(g)" />
        <el-table-column prop="totality" label="总热量(g)" />
        <el-table-column prop="updateTime" label="跟新日期" />
        <el-table-column label="操作" align="center" width="280" #default="scope">
            <el-button type="primary" size="small" @click="editShow(scope.row)">
                编辑
            </el-button>
            <el-button type="danger" size="small" @click="deleteById(scope.row)">
                删除
            </el-button>
        </el-table-column>
    </el-table>
    <!-- 添加/修改 -->
    <el-dialog v-model="dialogVisible" title="添加/修改" width="40%">
        <el-form label-width="120px">
            <el-form-item label="食物种类">
                <el-select
                class="m-2"
                placeholder="请选择"
                size="small"
                style="width: 100px"
                v-model="manage.speciesId"
                 >
                <el-option
                    v-for="item in brandList"
                     :key="item.id"
                    :label="item.sname"
                    :value="item.id"
                />
                </el-select>
            </el-form-item>
            <el-form-item label="事物名称">
                <el-input v-model="manage.dname"/>
            </el-form-item>
            <el-form-item label="碳水化合物（g）">
                <el-input v-model="manage.carbohydrate"/>
            </el-form-item>
            <el-form-item label="蛋白质（g)">
                <el-input v-model="manage.protein"/>
            </el-form-item>
            <el-form-item label="脂肪（g）">
                <el-input v-model="manage.fat"/>
            </el-form-item>
            <el-form-item label="总热量（kal）">
                <el-input v-model="manage.totality"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="falseAll">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog> 

    <!--分页条-->
    <el-pagination
                    v-model:current-page="pageParams.page"
                    v-model:page-size="pageParams.limit"
                    :page-sizes="[10, 20, 50, 100]"
                    @size-change="findManages"
                    @current-change="findManages"
                    layout="total, sizes, prev, pager, next"
                    :total="total"
        />
</template>

<script setup>
import { ref,onMounted } from 'vue'; 
import {findManage,findSpecies,addManages,findManageById,updateManage,deleteManage} from '@/api/manage';
import { ElMessage,ElMessageBox } from 'element-plus'

//数据模板
let list = ref([])
//分页总条数
let total = ref(0)

const brandList = ref([])

const pageParamsForm = {
    page : 1,
    limit: 3
}

//重置
const resetData = () => {
  queryDto.value = { speciesId:'' }
  findManages()
}


const pageParams = ref(pageParamsForm)
// 定义搜索表单数据模型
const queryDto = ref({
    speciesId:''
})
//弹框
const dialogVisible = ref(false)
//取消
const falseAll = ()=>{
    dialogVisible.value = false
    manage.value = ({
        speciesId:'',
        dname:'',
        carbohydrate:'',
        protein:'',
        fat:'',
        totality:''
    })
}

const manage = ref({
    speciesId:'',
    dname:'',
    carbohydrate:'',
    protein:'',
    fat:'',
    totality:''
})
onMounted(()=>{
    findManages()
    findSpeciesAll()
})
const findManages = async()=>{
    const {data} = await findManage(queryDto.value)
    list.value = data
}
const findSpeciesAll = async()=>{
    const {data} = await findSpecies()
    brandList.value = data
}

//打开弹框
const addManage = ()=>{
    dialogVisible.value = true
}
//根据id查询信息
const editShow = async(row)=>{
    const {data} = await findManageById(row.id)
    manage.value = data
    dialogVisible.value = true
}

//提交判断是添加还是修改
const submit = async()=>{
    if(!manage.value.id){
        //没有id那就是添加信息
        const {code} = await addManages(manage.value)
        if(code === 200){
            dialogVisible.value = false
            ElMessage.success('添加成功')
            findManages()
        }
    }else{
        //有id就是修改信息
        const {code} = await updateManage(manage.value)
        if(code === 200){
            dialogVisible.value = false
            ElMessage.success('修改成功')
            findManages()
        }
    }
}
//删除
const deleteById = async (row)=>{
    ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
       const {code} = await deleteManage(row.id)
       if(code === 200) {
            ElMessage.success('删除成功')
            findManages()
       }
    })
}

</script>

<style lang="scss" scoped>

</style>